<script>

import lineChart from "@/components/echarts/lineChart/lineChart.vue";
import {
  customerDevelopCount,
  visitorCount,
  deviceCount,
  deviceAccessInterval,
  deviceAccessTrend,
  messageNotification,
  employeeCount,
  cameraCount,
  messageCount,
} from "@/api/home";
import { getInfo } from "@/api/login";
export default {
  name: "index",
  components: {
    lineChart,
  },
  data() {
    return {
      rangeDateValue: [],
      pickerDateValue: [],
      dateText: "近一周",
      currentRange: "1", //默认选中近一周
      deviceCountList: "",
      deviceAccessIntervalList: "",
      messageNotificationList: "",
      deviceAccessTrendList: [],
      visitorCountData: "",
      employeeCount: "",
      customerDevelopCountList: [],
      customerDevelopCountData: "",
      cameraCountData: "",
      messageCountData: "",
      userInfo: "",
      routerList:[]
    };
  },
  created() {
    this.getUser();
    this.getRouter()
  },
  mounted() {
    this.handleDateChange("1");
    this.getCustomerDevelopCount();
    this.getVisitorCount();
    this.getEmployeeCount();
    this.getDeviceCount();
    this.getDeviceAccessInterval();
    this.getMessageNotification();
    this.getCameraCount();
    this.getMessageCount();
  },
  computed: {},
  methods: {
    getRouter(){
      this.$store.state.permission.sidebarRouters.forEach(item => {
       if(item.children && item.children.length){
         item.children.forEach(c=>{
           this.routerList.push(c.name)
         })
       }
      })
    },
    getUser() {
      getInfo().then((res) => {
        this.userInfo = res.user;
      });
    },
    goToMenu(type) {
      if (type === "visitor") {
        if(!this.routerList.includes('VisitorManagement')) return this.$message.warning('暂无权限添加')
        this.$router.push({ path: "/visitorManagement" });
      } else if (type === "camera") {
        if(!this.routerList.includes('CameraManagement')) return this.$message.warning('暂无权限添加')
        this.$router.push({ path: "/cameraManagement" });
      } else if (type === "message") {
        if(!this.routerList.includes('MessageManagement')) return this.$message.warning('暂无权限添加')
        this.$router.push({ path: "/messageManagement" });
      } else if (type === "staff") {
        if(this.userInfo.userId !== 1) return this.$message.warning('暂无权限添加')
        this.$router.push({ path: "/system/user" });
      } else if (type === "accessCode") {
        if(!this.routerList.includes('AccessCode')) return this.$message.warning('暂无权限添加')
        this.$router.push({ path: "/accessCode" });
      }
    },
    handleDateChange(e) {
      this.currentRange = e;
      this.rangeDateValue = this.getRangeDate(e);
      if (e == "1") {
        this.dateText = "近一周";
      } else if (e == "2") {
        this.dateText = "近一个月";
      } else {
        this.dateText = "近一年";
      }
      this.getDeviceAccessTrend("range");
    },
    //日期范围计算
    getRangeDate(type) {
      const end = new Date();
      let start = new Date();
      if (type === "1") {
        // 近一周
        start.setDate(end.getDate() - 6);
      } else if (type === "2") {
        // 近一个月
        start.setMonth(end.getMonth() - 1);
        start.setDate(start.getDate() + 1);
      } else if (type === "3") {
        // 近一年
        start.setFullYear(end.getFullYear() - 1);
        start.setDate(start.getDate() + 1);
      }
      // 格式化日期
      const formatStart = (d) => d.toISOString().slice(0, 10) + " 00:00:00";
      const formatEnd = (d) => d.toISOString().slice(0, 10) + " 23:59:59";
      return [formatStart(start), formatEnd(end)];
    },
    //日期选择器自定义选择
    handleDatePickerChange(val) {
      this.pickerDateValue = val;
      this.getDeviceAccessTrend("picker");
    },
    // 消息通知
    getMessageNotification() {
      messageNotification().then((res) => {
        this.messageNotificationList = res.rows;
      });
    },
    // 客户拓展排行榜
    getCustomerDevelopCount() {
      customerDevelopCount().then((res) => {
        this.customerDevelopCountData = res.data.self || {};
        this.customerDevelopCountList = res.data.list || [];
      });
    },
    // 用户数量
    getVisitorCount() {
      visitorCount().then((res) => {
        this.visitorCountData = res.data;
      });
    },
    //员工数量
    getEmployeeCount() {
      employeeCount().then((res) => {
        this.employeeCount = res.data;
      });
    },
    //设备访问次数
    getDeviceCount() {
      deviceCount().then((res) => {
        this.deviceCountList = res.data;
      });
    },
    //监控点数量
    getCameraCount() {
      cameraCount().then((res) => {
        this.cameraCountData = res.data;
      });
    },
    //留言数量
    getMessageCount() {
      messageCount().then((res) => {
        this.messageCountData = res.data;
      });
    },
    // 设备访问时长
    getDeviceAccessInterval() {
      deviceAccessInterval().then((res) => {
        this.deviceAccessIntervalList = res.data;
      });
    },
    //访问趋势
    getDeviceAccessTrend(source) {
      let params = {};
      if (
        source === "picker" &&
        this.pickerDateValue &&
        this.pickerDateValue.length === 2
      ) {
        params.beginTime = this.pickerDateValue[0];
        params.endTime = this.pickerDateValue[1];
        params.type = "00";
      } else if (
        source === "range" &&
        this.rangeDateValue &&
        this.rangeDateValue.length === 2
      ) {
        params.beginTime = this.rangeDateValue[0];
        params.endTime = this.rangeDateValue[1];
        params.type =
          this.currentRange === "1"
            ? "00"
            : this.currentRange === "2"
              ? "00"
              : "02";
      } else {
        return;
      }
      deviceAccessTrend(params).then((res) => {
        this.deviceAccessTrendList = res.data || [];
      });
    },
  },
};
</script>

<template>
  <div class="indexContainer" id="indexContainer">
    <div class="leftContent">
      <div class="quickEntrance">
        <div class="title">快捷入口</div>
        <div class="ul">
          <div class="li" @click="goToMenu('accessCode')">
            <img src="@/assets/images/indexAndLogin/icon/addVis.png" alt="" />
            <span>添加访客</span>
          </div>
          <div class="li" @click="goToMenu('staff')">
            <img src="@/assets/images/indexAndLogin/icon/addSta.png" alt="" />
            <span>添加员工</span>
          </div>
          <div class="li" @click="goToMenu('visitor')">
            <img src="@/assets/images/indexAndLogin/icon/visMent.png" alt="" />
            <span>访客管理</span>
          </div>
          <div class="li" @click="goToMenu('camera')">
            <img src="@/assets/images/indexAndLogin/icon/cameraMent.png" alt="" />
            <span>摄像头管理</span>
          </div>
          <div class="li" @click="goToMenu('message')">
            <img src="@/assets/images/indexAndLogin/icon/lookMessage.png" alt="" />
            <span>查看留言</span>
          </div>
        </div>
      </div>
      <div class="message">
        <div class="flex-end">
          <div class="title">消息通知</div>
          <div class="allData" @click="goToMenu('visitor')">
            更多
            <img src="@/assets/images/indexAndLogin/icon/rightIcon.png" alt="" />
          </div>
        </div>
        <img class="bgi" src="@/assets/images/indexAndLogin/bottomLeft.png" alt="" />
        <div class="messageList">
          <div class="messageItem" v-for="(item, index) in messageNotificationList" :key="index">
            <img src="@/assets/images/indexAndLogin/icon/speaker.png" alt="" />
            <div class="right">
              <div class="time">{{ item.beginTime }}</div>
              <div class="text">{{ item.accessContent }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="midContent">
      <div class="product">
        <div class="title">项目概况</div>
        <div class="navbar">
          <div class="navItem">
            <div class="navItemTitle">所有监控点</div>
            <div class="number">{{ cameraCountData.totalCount }}</div>
            <div class="bottomInfo">
              <div class="abnormal">
                异常：{{ cameraCountData.offlineCount }}
              </div>
              <div class="online">在线：{{ cameraCountData.onlineCount }}</div>
            </div>
          </div>
          <div class="navItem">
            <div class="navItemTitle">员工数量</div>
            <div class="number">{{ employeeCount.total }}</div>
            <div class="bottomInfo">
              <div class="abnormal">在线：{{ employeeCount.online }}</div>
            </div>
          </div>
          <div class="navItem">
            <div class="navItemTitle">用户数量</div>
            <div class="number">{{ visitorCountData.totalCount }}</div>
            <div class="bottomInfo">
              <div class="abnormal">
                在线：{{ visitorCountData.onlineCount }}
              </div>
              <div class="online">
                离线：{{ visitorCountData.offlineCount }}
              </div>
            </div>
          </div>
          <div class="navItem">
            <div class="navItemTitle">留言数量</div>
            <div class="number">{{ messageCountData.totalCount }}</div>
            <div class="bottomInfo">
              <div class="abnormal">
                今日：{{ messageCountData.todayCount }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="nowYear">
        <div class="title-box">
          <div class="title-box-left">
            <div class="title minWidth">{{ dateText }}访问趋势</div>
            <div class="options">
              <el-button size="small" :class="{ active: currentRange === '1' }"
                @click="handleDateChange('1')">近一周</el-button>
              <el-button size="small" :class="{ active: currentRange === '2' }"
                @click="handleDateChange('2')">近一个月</el-button>
              <el-button size="small" :class="{ active: currentRange === '3' }"
                @click="handleDateChange('3')">近一年</el-button>
            </div>
          </div>
          <div class="title-box-right">
            <el-date-picker style="width: 100%;" v-model="pickerDateValue" type="daterange" range-separator="至" start-placeholder="开始日期"
              end-placeholder="结束日期" value-format="yyyy-MM-dd HH:mm:ss" :popper-append-to-body="false"
              @change="handleDatePickerChange">
            </el-date-picker>
          </div>
        </div>

        <!-- <img class="bgi" src="@/assets/images/indexAndLogin/midCenter.png" alt=""> -->
        <div class="line-chart" ref="line-chart">
          <lineChart :chart-data="deviceAccessTrendList" />
        </div>
      </div>
      <div class="ranking">
        <div class="left">
          <div class="title">设备访问次数排行</div>
          <div class="rankUl">
            <div class="rankLi" v-for="(item, index) in deviceCountList" :key="index">
              <img v-if="index === 0" src="@/assets/images/indexAndLogin/icon/metals.png" alt="" />
              <img v-if="index === 1" src="@/assets/images/indexAndLogin/icon/silver.png" alt="" />
              <img v-if="index === 2" src="@/assets/images/indexAndLogin/icon/copper.png" alt="" />
              <div class="sort" v-if="index > 2">{{ index + 1 }}</div>
              <div class="text">{{ item.accessContent }}</div>
              <div class="lastText" :class="{
                metals: index === 0,
                silver: index === 1,
                copper: index === 2,
              }">
                {{ item.deviceCount }}次
              </div>
            </div>
          </div>
        </div>
        <div class="right">
          <div class="title">设备访问时长排行</div>
          <div class="rankUl">
            <div class="rankLi" v-for="(item, index) in deviceAccessIntervalList" :key="index">
              <img v-if="index === 0" src="@/assets/images/indexAndLogin/icon/metals.png" alt="" />
              <img v-if="index === 1" src="@/assets/images/indexAndLogin/icon/silver.png" alt="" />
              <img v-if="index === 2" src="@/assets/images/indexAndLogin/icon/copper.png" alt="" />
              <div class="sort" v-if="index > 2">{{ index + 1}}</div>
              <div class="text">{{ item.accessContent }}</div>
              <div  class="lastText" :class="{
                metals: index === 0,
                silver: index === 1,
                copper: index === 2,
              }">
                {{ item.accessInterval }}分钟
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="rightContent">
      <img class="rightTopBgi" src="@/assets/images/indexAndLogin/rightTopBgi.png" alt="" />
      <div class="customerRanking">
        <div class="title">客户拓展排行榜</div>
        <div class="info">
          <img src="@/assets/images/indexAndLogin/avatar.png" alt="" />
          <div class="right">
            <div class="name">{{ userInfo.nickName }}</div>
            <div class="enterpriseName">{{ userInfo.remark }}</div>
            <div class="numbers">
              <div class="createNum">
                创建量：{{ customerDevelopCountData.developCount }}
              </div>
              <div class="sortNum">
                排名：{{ customerDevelopCountData.rank }}
              </div>
            </div>
          </div>
        </div>
        <div class="sortInfo">
          <div class="left" v-if="customerDevelopCountList[1]">
            <el-tooltip class="item" effect="dark" :content="customerDevelopCountList[1].submitUserName" placement="top">
            <div class="text">
              {{ customerDevelopCountList[1].submitUserName }}
            </div>
            </el-tooltip>

            <div class="number">
              {{ customerDevelopCountList[1].developCount }}
            </div>
          </div>
          <div class="mid" v-if="customerDevelopCountList[0]">
            <el-tooltip class="item" effect="dark" :content="customerDevelopCountList[0].submitUserName" placement="top">
              <div class="text">
                {{ customerDevelopCountList[0].submitUserName }}
              </div>
            </el-tooltip>

            <div class="number">
              {{ customerDevelopCountList[0].developCount }}
            </div>
          </div>
          <div class="right" v-if="customerDevelopCountList[2]">
            <el-tooltip class="item" effect="dark" :content="customerDevelopCountList[2].submitUserName" placement="top">
              <div class="text">
                {{ customerDevelopCountList[2].submitUserName }}
              </div>
            </el-tooltip>
            <div class="number">
              {{ customerDevelopCountList[2].developCount }}
            </div>
          </div>
        </div>

        <div class="sortUl">
          <div class="sortLi" v-for="(item, index) in customerDevelopCountList.slice(3)" :key="item.submitUserId">
            <div class="sortIndex">
              {{ (index + 4).toString().padStart(2, "0") }}
            </div>
            <div class="avatar">
              <!-- <img src="@/assets/images/indexAndLogin/avatar.png" alt=""> -->
            </div>
            <el-tooltip class="item" effect="dark" :content="item.submitUserName" placement="top">
              <div class="name">{{ item.submitUserName }}</div>
            </el-tooltip>
            <div class="rank">{{ item.developCount }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
::v-deep .el-picker-panel {
  z-index: 3000 !important;
}

.indexContainer {
  width: 100%;
  background-color: #f5f5f5;
  padding: 20px 14px 40px 20px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;

  .title-box {
    display: flex;
    justify-content: space-between;
    align-items: center;

    &-left {
      display: flex;
      align-items: center;

      .minWidth {
        min-width: calc(100vw * 140 / 1920);
      }

      .options {
        margin-left: calc(100vw * 15 / 1920);
        margin-right: calc(100vw * 15 / 1920);
        display: flex;
        align-items: center;
      }
    }
  }

  .title {
    height: calc(100vw * 20 / 1920);
    font-family:
      Source Han Sans CN,
      Source Han Sans CN;
    font-weight: 700;
    font-size: calc(100vw * 16 / 1920);
    color: #384a5c;
    display: flex;
    align-items: center;
  }

  .title::before {
    content: "";
    display: inline-block;
    width: calc(100vw * 3 / 1920);
    height: calc(100vw * 16 / 1920);
    background: #0088ff;
    margin-right:calc(100vw * 6 / 1920);
    border-radius: calc(100vw * 1 / 1920);
  }

  .flex-end {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .allData {
    cursor: pointer;
    font-family:
      Microsoft YaHei,
      Microsoft YaHei;
    font-weight: 400;
    font-size: calc(100vw * 12 / 1920);
    color: #0088ff;
    display: flex;
    align-items: center;

    img {
      margin-left: calc(100vw * 4 / 1920);
      width: calc(100vw * 14 / 1920);
      height: calc(100vw * 12 / 1920);
    }
  }

  .leftContent {
    width: 20%;
    height: 100%;
    margin-right: calc(100vw * 20 / 1920);

    .quickEntrance {
      padding: calc(100vw * 16 / 1920);
      box-sizing: border-box;
      width: 100%;
      height:calc(100vw * 254 / 1920);
      margin-bottom: calc(100vw * 20 / 1920);
      background-image: url("../assets/images/indexAndLogin/topLeft.png");

      .ul {
        display: flex;
        align-items: center;
        flex-wrap: wrap;

        .li {
          width: 33%;
          text-align: center;
          margin-top: calc(100vw * 30 / 1920);
          display: flex;
          flex-direction: column;
          align-items: center;

          img {
            display: block;
            width:calc(100vw * 40 / 1920);
            height: calc(100vw * 40 / 1920);
            margin-bottom:calc(100vw * 8 / 1920);
            vertical-align: center;
          }

          span {
            font-family:
              Source Han Sans CN,
              Source Han Sans CN;
            font-weight: 400;
            font-size: calc(100vw * 14 / 1920);
            color: #384a5c;
          }
        }
      }
    }

    .message {
      width: 100%;
      height:calc(100vw * 526 / 1920);
      position: relative;
      background: #fff;
      padding: calc(100vw * 16 / 1920);
      box-sizing: border-box;

      .bgi {
        position: absolute;
        bottom: 0;
        right: 0;
        width: calc(100vw * 239 / 1920);
        height: calc(100vw * 266 / 1920);
      }

      .messageList {
        width: 100%;
        margin-top: calc(100vw * 20 / 1920);
        overflow-y: scroll;
        height: calc(100% - calc(100vw * 40 / 1920));

        .messageItem {
          display: flex;
          align-items: center;
          margin-bottom: calc(100vw * 14 / 1920);

          img {
            width: calc(100vw * 18 / 1920);
            height: calc(100vw * 16 / 1920);
            margin-right: calc(100vw * 10 / 1920);
          }

          .right {
            width: calc(100% - calc(100vw * 30 / 1920));

            .time {
              font-family:
                Source Han Sans CN,
                Source Han Sans CN;
              font-weight: 400;
              font-size: calc(100vw * 12 / 1920);
              color: #637485;
              margin-bottom: calc(100vw * 4 / 1920);
            }

            .text {
              font-family:
                Source Han Sans CN,
                Source Han Sans CN;
              font-weight: 400;
              font-size: calc(100vw * 14 / 1920);
              color: #384a5c;
              width: 100%;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }
          }

          &:last-child {
            margin-bottom: 0;
          }
        }
      }
    }
  }

  .midContent {
    width: calc(100% - 40% - calc(100vw * 40 / 1920));

    .product {
      padding: calc(100vw * 16 / 1920);
      box-sizing: border-box;
      width: 100%;
      height: calc(100vw * 254 / 1920);
      margin-bottom: calc(100vw * 20 / 1920);
      background: #fff;

      .navbar {
        width: 100%;
        margin-top: calc(100vw * 30 / 1920);
        height: calc(100% - calc(100vw * 50 / 1920));
        display: flex;
        align-items: center;
        justify-content: space-around;

        .navItem {
          width: 25%;
          height: 100%;
          margin-right: calc(100vw * 14 / 1920);
          background-repeat: no-repeat;
          background-size: 100% 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          position: relative;

          .navItemTitle {
            position: absolute;
            top: calc(100vw * 17 / 1920);
            font-family:
              Source Han Sans CN,
              Source Han Sans CN;
            font-weight: 500;
            font-size: calc(100vw * 14 / 1920);
            color: #ffffff;
          }

          .number {
            font-family:
              Source Han Sans CN,
              Source Han Sans CN;
            font-weight: 500;
            font-size: calc(100vw * 36 / 1920);
            color: #ffffff;
          }

          .bottomInfo {
            position: absolute;
            bottom: calc(100vw * 20 / 1920);
            left: calc(100vw * 20 / 1920);
            right: calc(100vw * 20 / 1920);
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-family:
              Source Han Sans CN,
              Source Han Sans CN;
            font-weight: 500;
            font-size: calc(100vw * 16 / 1920);
            color: #ffffff;
          }

          &:last-child {
            margin-right: 0;
          }
        }

        .navItem:nth-child(1) {
          background-image: url("../assets/images/indexAndLogin/midTop1.png");
        }

        .navItem:nth-child(2) {
          background-image: url("../assets/images/indexAndLogin/midTop2.png");
        }

        .navItem:nth-child(3) {
          background-image: url("../assets/images/indexAndLogin/midTop3.png");
        }

        .navItem:nth-child(4) {
          background-image: url("../assets/images/indexAndLogin/midTop4.png");
        }
      }
    }

    .nowYear {
      padding: calc(100vw * 16 / 1920);
      box-sizing: border-box;
      width: 100%;
      background: #fff;
      height: calc(100vw * 254 / 1920);
      margin-bottom: calc(100vw * 20 / 1920);
      position: relative;
      background-image: url("../assets/images/indexAndLogin/midCenter.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;

      .line-chart {
        width: 100%;
        margin-top: calc(100vw * 10 / 1920);
        height: calc(100% - calc(100vw * 50 / 1920));
      }

      .bgi {
        position: absolute;
        bottom: 0;
        right: 0;
        height: 100%;
        width: calc(100vw * 414 / 1920);
      }
    }

    .ranking {
      width: 100%;
      height: calc(100vw * 252 / 1920);
      display: flex;
      align-items: center;
      justify-content: space-between;

      .left,
      .right {
        height: calc(100% - calc(100vw * 40 / 1920));
        position: relative;
        padding: calc(100vw * 16 / 1920);
        box-sizing: border-box;
        background-image: url("../assets/images/indexAndLogin/midBottom.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        overflow: hidden;

        .rankUl {
          width: 100%;
          margin-top: calc(100vw * 20 / 1920);
          height: calc(100% - calc(100vw * 40 / 1920));
          overflow-y: scroll;
          z-index: 99;

          .rankLi {
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: calc(100vw * 40 / 1920);
            line-height: calc(100vw * 40 / 1920);
            background: rgba(255, 255, 255, 0.19);
            box-shadow: 0 0 9px 0 rgba(80, 135, 255, 0.1043);
            border-radius: calc(100vw * 4 / 1920);
            padding: 0 calc(100vw * 16 / 1920);
            box-sizing: border-box;
            margin-bottom: calc(100vw * 14 / 1920);

            .sort {
              width: calc(100vw * 30 / 1920);
              height: calc(100vw * 30 / 1920);
              display: flex;
              align-items: center;
              justify-content: center;
              font-family:
                Microsoft YaHei,
                Microsoft YaHei;
              font-weight: 400;
              font-size: calc(100vw * 14 / 1920);
              color: #384a5c;
              margin-right: calc(100vw * 30 / 1920);
            }

            img {
              width: calc(100vw * 30 / 1920);
              height: calc(100vw * 30 / 1920);
              margin-right: calc(100vw * 20 / 1920);
            }

            .text {
              flex: 1;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              font-family:
                Microsoft YaHei,
                Microsoft YaHei;
              font-weight: 400;
              font-size: calc(100vw * 14 / 1920);
              color: #384a5c;
              margin-right: calc(100vw * 10 / 1920);
            }

            .number {
              width: calc(100vw * 40 / 1920);
              font-family:
                Microsoft YaHei,
                Microsoft YaHei;
              font-weight: 400;
              font-size: calc(100vw * 14 / 1920);
              color: #6b7280;
            }

            .metals {
              color: #ffb32f;
              font-size: calc(100vw * 14 / 1920);
            }

            .silver {
              color: #9199ac;
              font-size: calc(100vw * 14 / 1920);
            }

            .copper {
              color: #d48960;
              font-size: calc(100vw * 14 / 1920);
            }
            .lastText{
              font-size: calc(100vw * 14 / 1920);
            }

            &:last-child {
              margin-bottom: 0;
            }
          }
        }
      }

      .left {
        height: 100%;
        margin-right: calc(100vw * 20 / 1920);
        width: 49%;
        background: #fff;
      }

      .right {
        height: 100%;
        flex: 1;
        background: #fff;
      }
    }
  }

  .rightContent {
    width: 20%;
    height: 100%;
    margin-left: calc(100vw * 20 / 1920);
    position: relative;

    .rightTopBgi {
      position: absolute;
      top: 0;
      width: 100%;
      height: calc(100vw * 100 / 1920);
    }

    .customerRanking {
      padding: calc(100vw * 16 / 1920);
      box-sizing: border-box;
      width: 100%;
      height: calc(100vw * 800 / 1920);
      background: #fff;
      overflow: hidden;

      .info {
        margin-top: calc(100vw * 30 / 1920);
        display: flex;

        img {
          width: calc(100vw * 54 / 1920);
          height: calc(100vw * 54 / 1920);
          margin-right: calc(100vw * 14 / 1920);
        }

        .right {
          width: calc(100% - calc(100vw * 74 / 1920));

          .name {
            font-family:
              Source Han Sans CN,
              Source Han Sans CN;
            font-weight: 400;
            font-size: calc(100vw * 16 / 1920);
            color: #384a5c;
          }

          .enterpriseName {
            font-family:
              Source Han Sans CN,
              Source Han Sans CN;
            font-weight: 400;
            font-size: calc(100vw * 12 / 1920);
            color: #637485;
            margin: calc(100vw * 4 / 1920) 0;
          }

          .numbers {
            font-family:
              Source Han Sans CN,
              Source Han Sans CN;
            font-weight: 400;
            font-size: calc(100vw * 14 / 1920);;
            color: #384a5c;
            display: flex;
            align-items: center;

            .createNum {
              margin-right: calc(100vw * 30 / 1920);
            }
          }
        }
      }

      .sortInfo {
        margin: calc(100vw * 20 / 1920) 0;
        width: 100%;
        height: calc(100vw * 150 / 1920);
        background-image: url("../assets/images/indexAndLogin/rightMid.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-position: center;
        position: relative;

        .text {
          width: 100%;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          font-family:
            Source Han Sans CN,
            Source Han Sans CN;
          font-weight: 400;
          font-size: calc(100vw * 14 / 1920);
          color: #384a5c;
        }

        .number {
          font-family:
            Source Han Sans CN,
            Source Han Sans CN;
          font-weight: 500;
          font-size: calc(100vw * 12 / 1920);
        }

        .left {
          position: absolute;
          left: 10%;
          width: calc(100vw * 60 / 1920);
          bottom: calc(100vw * 28 / 1920);
          text-align: center;

          .number {
            color: #0088ff;
          }
        }

        .mid {
          position: absolute;
          left: 50%;
          transform: translateX(-50%);
          bottom: calc(100vw * 43 / 1920);
          width: calc(100vw * 60 / 1920);
          text-align: center;

          .number {
            color: #ffb200;
          }
        }

        .right {
          width: calc(100vw * 60 / 1920);
          position: absolute;
          right: 8.5%;
          bottom: calc(100vw * 15 / 1920);
          text-align: center;

          .number {
            color: #eab88d;
          }
        }
      }

      .sortUl {
        width: 100%;
        height: calc(100% - calc(100vw * 220 / 1920));
        overflow-y: scroll;

        .sortLi {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: calc(100vw * 20 / 1920);
          border-bottom: calc(100vw * 1 / 1920) solid rgba(151, 151, 151, 0.2);

          .sortIndex {
            font-family:
              Source Han Sans CN,
              Source Han Sans CN;
            font-weight: 400;
            font-size: calc(100vw * 14 / 1920);
            color: #384a5c;
            width: calc(100vw * 30 / 1920);
            height: calc(100vw * 30 / 1920);
            margin-right: calc(100vw * 20 / 1920);
            text-align: center;
            line-height: calc(100vw * 30 / 1920);
          }

          .avatar {
            width: calc(100vw * 36 / 1920);
            height: calc(100vw * 36 / 1920);
            margin-right: calc(100vw * 20 / 1920);
            text-align: center;
            background-image: url("../assets/images/indexAndLogin/avatar.png");
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center;

            img {
              width: 100%;
              height: 100%;
            }
          }

          .name {
            width: calc(100vw * 120 / 1920);
            text-align: center;
            font-family:
              Source Han Sans CN,
              Source Han Sans CN;
            font-weight: 400;
            font-size: calc(100vw * 14 / 1920);
            color: #384a5c;
          }

          .rank {
            text-align: center;
            width: calc(100vw * 50 / 1920);
            font-family:
              Source Han Sans CN,
              Source Han Sans CN;
            font-weight: 400;
            font-size: calc(100vw * 14 / 1920);
            color: #384a5c;
          }

          &:last-child {
            margin-bottom: 0;
            border: none;
          }
        }
      }
    }
  }
}

.options .el-button.active {
  background: #0088FF;
  color: #fff;
  border-color: #0088FF;
}
</style>
